<script setup>
import { getProductionBlyy, getProdGoodYield } from '@/api/visual/productionBoard'
import { $formatechartData, fontSize } from '@/utils/globalMethod.js'

const optionData = ref([])
const key = ref(1)
const weekReportDetail = ref({
  GoodQty: 0,
  BadQty: 0,
  totality: 0,
  GoodYield: 0
})
const option = computed(() => ({

  title: [
    {
      // 图表标题
      top: '3%',
      text: '本周良品率',
      textStyle: {
        color: '#fff',
        fontSize: fontSize(0.16)
      },
      subtext: `{sub1|累计数量:${weekReportDetail.value.totality} }\n{sub2|良品数量:${weekReportDetail.value.GoodQty} }\n{sub3|不良数量:${weekReportDetail.value.BadQty} }`,
      subtextStyle: {
        rich: {
          sub1: {
            color: '#409eff',
            lineHeight: 20,
            fontSize: fontSize(0.12),
          },
          sub2: {
            color: 'red',
            lineHeight: 20,

            fontSize: fontSize(0.12)
          },
          sub3: {
            color: 'green',
            lineHeight: 20,

            fontSize: fontSize(0.12)
          }
        }
      }
    },
    {
      top: '45%',
      text: '本周不良原因占比',
      textStyle: {
        color: '#fff',
        fontSize: fontSize(0.16)
      }
    }
  ],

  series: [
    {
      name: '不良原因',
      type: 'pie',
      center: ['50%', '70%'],
      radius: ['20%', '30%'],
      label: {
        color: '#fff',
        formatter: '{b}: {d}%',
        textStyle: {
          fontSize: fontSize(0.12)
        }
      },
      labelLine: {
        length: 8
      },
      data: optionData.value
    },
    {
      type: 'gauge', // 仪表盘类型
      name: '本周不良原因占比', // 用于tooltip的显示
      startAngle: 90, // 仪表盘开始角度（设置背景圆的角度）
      endAngle: -270, // 仪表盘结束角度
      center: ['50%', '25%'], // 中心点（圆心坐标）
      radius: '30%', // 圆大小（仪表盘半径）
      clockwise: true, // 仪表盘刻度是否是顺时针增长
      // 仪表盘轴线相关配置
      axisLine: {
        show: true,
        roundCap: false, // 两端显示成圆形（背景环）
        clip: false, // 是否裁剪超出部分
        // 设置背景圆环样式
        lineStyle: {
          width: 10, // 圆环宽度
          color: [[1, '#002865']] // 圆环背景色
        }
      },
      // 仪表盘指针
      pointer: {
        show: false
      },
      // 进度设置
      progress: {
        show: true,
        overlap: false, // 多组数据时进度条是否重叠
        roundCap: true, // 是否在两端显示成圆形
        clip: false, // 是否裁掉超出部分
        // 进度条样式
        itemStyle: {
          borderWidth: 0,
          shadowColor: '',
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#02C77E' // 0% 处的颜色  '#02C77E'
              },
              {
                offset: 1,
                color: '#017770' // 100% 处的颜色  '#017770'
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      // 仪表盘分割线
      splitLine: {
        show: false
      },
      // 刻度样式
      axisTick: {
        show: false
      },
      // 刻度标签
      axisLabel: {
        show: false
      },
      title: {
        show: false,
        fontSize: fontSize(0.16)
      },
      detail: {
        // width: 50,
        // height: 14,
        fontSize: fontSize(0.14),
        color: 'auto'
      },
      data: [
        {
          value: Math.round(weekReportDetail.value.GoodYield * 10000) / 100,
          name: '345',
          detail: {
            // 中心title设置
            offsetCenter: ['0%', '0%'],
            color: '#01F8FF',
            formatter: '{value}%'
            // borderColor: '#01F8FF',
            // borderRadius: 20,
            // borderWidth: 1,
          }
        }
      ]
    }
  ]
}))

const loadData = async () => {
  const { data } = await getProductionBlyy({ date: 'week' })
  optionData.value = $formatechartData(data, 'NotWellName', 'blsl')
}

const loadGoodYield = async () => {
  const { data } = await getProdGoodYield({ date: 'week' })
  weekReportDetail.value = { ...data }
}

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++
    }, 100)
  })
}
onMounted(loadData)
onMounted(loadGoodYield)
onMounted(() => {
  setTimeout(() => {
    key.value++
  }, 100)
  window.addEventListener('resize', keyResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', keyResize)
})
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box10 :key="key">
      <ps-chart2 :option="option"></ps-chart2>
    </dv-border-box10>
  </div>
</template>

<style scoped lang="scss"></style>
